.shape{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.shape div{
	margin: 10px;
}
/*圆形*/
.circle{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: #1BAA22;
}
/*正方形*/
.square{
	width: 100px;
	height: 100px;
	background-color: #11AAA1;
}
/*长方形*/
.rectangle{
	width: 100px;
	height: 50px;
	background-color: #1A1D1D;
}
/*椭圆形*/
.oval{
    width: 100px;
    height: 50px;
    background: #e9337c;
    border-radius: 50%;
}
/*上三角形*/
.triangle-up{
	width: 0;
	height: 0;
	border-bottom: 100px solid #AA0000;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
}
/*下三角形*/
.triangle-down{
	width: 0;
	height: 0;
	border-top: 100px solid #AA0000;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
}
/*左三角形*/
.triangle-left{
	width: 0;
	height: 0;
	border-right: 100px solid #AA0000;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
}
/*右三角形*/
.triangle-right{
	width: 0;
	height: 0;
	border-left: 100px solid #AA0000;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
}
/*菱形*/
.diamond{
	width: 60px;
	height: 60px;
	transform: rotate(-45deg);
	background-color: #0000AA;
}
/*梯形*/
.trapezium{
	width: 50px;
	height: 0;
	border-bottom: 100px solid #ACAC0C;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
}
/*平行四边形*/
.parallelogram{
	width: 100px;
	height: 80px;
	transform: skew(30deg);
	background-color: #9F122D;
}
/*五角星*/
.star {
    width: 0;
    height: 0;
    position: relative;
    display: block;
    border-right: 50px solid transparent;
    border-bottom: 30px solid #fc2e5a;
    border-left: 50px solid transparent;
    transform: rotate(35deg);
}
.star:before {
    content: '';
	height: 0;
    width: 0;
    position: absolute;
    display: block;
    top: -30px;
    left: -35px;
    border-bottom: 40px solid #fc2e5a;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    transform: rotate(-35deg);
}
.star:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    display: block;
    top: 3px;
    left: -53px;
    border-right: 50px solid transparent;
    border-bottom: 30px solid #fc2e5a;
    border-left: 50px solid transparent;
    transform: rotate(-70deg);
}
/*六角形*/
.star-six-points{
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid #de34f7;
	margin: 10px auto;
}
.star-six-points:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #de34f7;
    margin: 30px 0 0 -50px;
}
/*五边形*/
.pentagon{
    width: 50px;
    height: 0;
    border-top: 60px solid #33fa1d;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
}
.pentagon:after{
    content: '';
    width: 0;
    height: 0;
    border-bottom: 50px solid #33fa1d;
    border-left: 55px solid transparent;
    border-right: 55px solid transparent;
    position: absolute;
    top: 108px;
    left: 257px;
}
/*六边形*/
.hexagon{
	width: 100px;
	height: 55px;
	background-color: #ff0011;
}
.hexagon:before{
	content: '';
	width: 0;
	height: 0;
	border-bottom: 25px solid #ff0011;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	position: absolute;
    top: 136px;
}
.hexagon:after{
	content: '';
	width: 0;
	height: 0;
	border-top: 25px solid #ff0011;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	position: absolute;
    top: 216px;
}
/*八边形*/
.octagon{
	width: 100px;
	height: 100px;
	background-color: #ac60ec;
	position: relative;
}
.octagon:before {
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid #ac60ec;
    border-left: 29px solid #ffffff;
    border-right: 29px solid #ffffff;
}
.octagon:after {
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid #ac60ec;
    border-left: 29px solid #ffffff;
    border-right: 29px solid #ffffff;
}
/*心形*/
.heart{
	position: relative;
}
.heart:before, .heart:after {
    content: "";
    width: 70px;
    height: 115px;
    position: absolute;
    background: red;
    left: 70px;
    top: -45px;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}
.heart:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}
/*蛋形*/
.egg{
	width: 96px;
	height: 150px;
	background-color: blue;
	border-radius: 50%;
}
/*无穷符号*/
.infinity{
	width: 110px;
	height: 50px;
	position: relative;
}
.infinity:before, .infinity:after{
	content: '';
	width: 30px;
	height: 30px;
	position: absolute;
	top: 0;
	left: 0;
	border: 10px solid #88ad1a;
	border-radius: 25px 25px 0 25px;
	transform: rotate(-45deg);
}
.infinity:after{
	left: auto;
	right: 0;
	border-radius: 25px 25px 25px 0;
	transform: rotate(45deg);
}
/*提示框*/
.comment-bubble{
	width: 140px;
	height: 100px;
	background-color: #088cb7;
	border-radius: 12px;
	position: relative;
}
.comment-bubble:before{
	content: '';
	width: 0;
	height: 0;
	left: 100%;
	top: 38px;
	position: absolute;
    border-top: 13px solid transparent;
    border-left: 26px solid #088cb7;
    border-bottom: 13px solid transparent;
}